<template>
    <van-popup v-model="showPicker" closeable position="bottom" @close="onClose">
        <div style="padding:40px 0 10px 0">
            <van-search v-model="value" :placeholder="'请输入搜索关键词'" @input="onInput" />
            <van-tree-select :items="items" :main-active-index.sync="activeIndex"
                @click-nav="clickNav($event, items[activeIndex])" @click-item="clickItem" />
        </div>
    </van-popup>
</template>

<script>
/**
 * items的类型
 */
/**
 * 
[
  {
    // 导航名称
    text: '所有城市',
    // 导航名称右上角徽标，2.5.6 版本开始支持
    badge: 3,
    // 是否在导航名称右上角显示小红点
    dot: true,
    // 导航节点额外类名
    className: 'my-class',
    // 该导航下所有的可选项
    children: [
      {
        // 名称
        text: '温州',
        // id，作为匹配选中状态的标识符
        id: 1,
        // 禁用选项
        disabled: true,
      },
      {
        text: '杭州',
        id: 2,
      },
    ],
  },
];
 */
import { getAction, postAction } from '@/api/manage'
import { TreeSelect } from 'vant';
export default {
    data() {
        return {
            items: [],
            activeId: "",
            activeIndex: 0,
            showPicker: false,
            parentId: 0,
            value: ""
        };
    },
    methods: {
        // 监听输入框
        onInput() {
            this.loadData()
        },
        loadData() {
            let params = {
                parentId: this.parentId,
                nodeName: this.value
            }
            postAction('ipqm/reviewDetail/selectFema', params).then((res) => {
                let data = res.result
                if (res.success) {
                    this.activeIndex = 0
                    this.items = data
                    this.items.forEach((el) => {
                        el.text = el.nodeName
                    })
                    this.clickNav(0, this.items[0])
                } else {
                }
            })

        },
        clickNav(e, item) {
            let params = {
                parentId: item.id,
                nodeName: this.value
            }
            postAction('ipqm/reviewDetail/selectFema', params).then((res) => {
                let data = res.result
                if (res.success) {
                    data.forEach((el) => {
                        el.text = el.nodeName
                    })
                    item.children = data
                    this.$set(this.items,e,item)
                    // this.$forceUpdate()
                } else {
                }
            })
        },
        clickItem(e) {
            // console.log(e)
            this.showPicker = false
            this.$emit('clickItem', e)
        },
        // 关闭
        onClose() {
        },
    }
}
</script>

<style>
</style>